import * as React from 'react';
import { Table, Button, Image, Space, Popconfirm } from 'antd'
import { IBanner } from './banner';
import { useMount } from 'ahooks';
import { ConnectRC, connect, history } from 'umi';
import { removeBanner } from '@/services/banner';
import MyBreadcrumb from '@/components/MyBreadcrumb'
export interface IBannerListProps {
  bannerList: IBanner[]
}

const BannerList: ConnectRC<IBannerListProps> =  (props) =>  {
  useMount(() => {
    props.dispatch({
      type: 'banner/getBannerListReq'
    })
  })
  const { bannerList } = props
  const columns = [
    {
      title: '序号',
      render (text: any, record: IBanner, index: number) {
        return <span>{ index + 1}</span>
      }
    },
    {
      title: '链接',
      dataIndex: 'link'
    },
    {
      title: '描述',
      dataIndex: 'alt'
    },
    {
      title: '图片',
      dataIndex: 'img',
      render (text: string, record: IBanner, index: number) {
        return (
          <Image src = { text} width={200} />
        )
      }
    },
    {
      title: '操作',
      render (text: any, record: IBanner, index: number) {
        return (
          <Space>
              <Button type="primary">编辑</Button>
              <Popconfirm
                title="确认删除此轮播图吗?"
                onConfirm={ () => {
                  removeBanner({ bannerid: record.bannerid }).then(() => {
                    // 删除此数据成功
                    // 重新获取一次数据
                    props.dispatch({
                      type: 'banner/getBannerListReq'
                    })
                  })
                }}
                onCancel={ () => {}}
              >
                <Button danger >删除</Button>
              </Popconfirm>
          </Space>
        )
      }
    }
  ]
  return (
    <div>
      <MyBreadcrumb />
      <Button onClick = { () => {
        history.push('/banner/add')
      }}>添加轮播图</Button>
      <Table dataSource = { bannerList } columns = { columns } rowKey = "bannerid"/>
    </div>
  );
}

export default connect(({ banner }: any) => ({ bannerList: banner.bannerList}))(BannerList)
